<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>


        // 箭头函数并内没有自己的this指向，指向上一层


        // 箭头函数的应用场景
        //    1 普通的函数封装都可以使用箭头函数
        //    2 在对象中，对象的方法一般不适用箭头函数，
        //      但是如果方法中嵌套了函数，一般这个嵌套的函数就需要使用箭头函数  保持这个this始终指向 这个对象
        //    3 在事件处理函数中，事件处理函数一般不适用箭头函数 ，
        //      但是如果事件中嵌套了函数，一般这个嵌套的函数就需要使用箭头函数  保持这个this始终指向 事件源


        const fn = () => {
            console.log(this);    // window
        }


        fn();



        const obj = {
            // say : function () {
            //     console.log(this);   // obj
            // }
            // say : () => {
            //     console.log(this);   // window
            // }

            say : function () {
                console.log(this);   // obj
                setTimeout(() => {
                    console.log(this);   // obj
                } , 1000)
            }
        }

        obj.say();





        // document.onclick = function() {
        //     console.log(this);   // document

        //     // setTimeout(function() {
        //     //     console.log(this);   // window
        //     // })

        //     setTimeout(() => {
        //         console.log(this);   // document
        //     })
        // }


        //事件处理函数原本的this指向事件源 ， 但是改写成箭头函数以后  this -> window 
        document.onclick = () => {
            console.log(this);   // window
        }



    </script>
    
</body>
</html>